<main class="app-content">
  <div class="searchBox mb-4">
    <div class="w-60">
      <span *ngIf="isAdmin" class="btn-style" (click)="onopenAdd()">新增资产</span>
      <span *ngIf="!isAdmin && !isGuest" class="btn-style" (click)="onopenReapir()">新建维修单</span>
      <span class="dropdown">
        <span class="btn-style"data-toggle="dropdown"><span class="mr-2">{{orderWords}}</span><i class="fa fa-chevron-down" aria-hidden="true"></i></span>
        <ul class="dropdown-menu settings-menu dropdown-menu-center">
            <li><a class="dropdown-item cursor" (click)="onOrderChange(1)">最近入库</a></li>
            <li><a class="dropdown-item cursor" (click)="onOrderChange(2)">最早入库</a></li>
            <li><a class="dropdown-item cursor" (click)="onOrderChange(3)">设备价格</a></li>
        </ul>
      </span>
      <span *ngIf="isAdmin" class="btn-style" (click)="onExportCode()">批量导出二维码</span>
      <span *ngIf="isAdmin" class="btn-style" (click)="onExportTable()">导出资产excel</span>
    </div>
    <div class="w-40 input-group searchStyle">
      <input type="text" class="form-control" placeholder="请输入资产名称" [(ngModel)]="asset.assetName" name="assetName">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" (click)="search()"><i class="fa fa-search"></i></button>
      </div>
      <span class="ml-2 cursor"  (click)="appearSearchbox()" >高级搜索</span>
    </div>
  </div>

  <div class="mb-4">
    <li class="mb-3 list-title">资产列表</li>
    <div class="choosegroup">
      <span [class.chooseactive]="type === AssetStatus.ALL" (click)="onChangeType(AssetStatus.ALL)">资产列表</span>
      <span [class.chooseactive]="type === AssetStatus.IDLE" (click)="onChangeType(AssetStatus.IDLE)">闲置资产</span>
      <span [class.chooseactive]="type === AssetStatus.USE" (click)="onChangeType(AssetStatus.USE)">使用中资产</span>
      <span [class.chooseactive]="type === AssetStatus.BROKE" (click)="onChangeType(AssetStatus.BROKE)">维修资产</span>
      <span [class.chooseactive]="type === AssetStatus.ABANDONED" (click)="onChangeType(AssetStatus.ABANDONED)">报废资产</span>
    </div>
    <div style="float: right">
      资产总计: {{count}}元
    </div>
  </div>
  <div class="tables">
    <div class="grid">
      <div class="left-table">
        <table mat-table [dataSource]="assets | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">

          <ng-container matColumnDef="rukuNum">
            <th mat-header-cell *matHeaderCellDef>入库单号</th>
            <td mat-cell *matCellDef="let row">{{ row.rukuNum}}</td>
          </ng-container>

          <ng-container matColumnDef="assetStatus">
            <th mat-header-cell *matHeaderCellDef>资产状态</th>
            <td mat-cell *matCellDef="let row ">
              {{ StatusNameMap[row.assetStatus]}}
            </td>
          </ng-container>

          <ng-container matColumnDef="repairStatus">
            <th mat-header-cell *matHeaderCellDef>维修状态</th>
            <td mat-cell *matCellDef="let row ">
              <span *ngIf="row.repairStatus === 1">已完成</span>
              <span *ngIf="row.repairStatus === 2">维修中</span>
              <span *ngIf="row.repairStatus === 3">报废</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetCode">
            <th mat-header-cell *matHeaderCellDef>资产编码</th>
            <td mat-cell *matCellDef="let row">{{ row.assetCode}}</td>
          </ng-container>

          <ng-container matColumnDef="assetName">
            <th mat-header-cell *matHeaderCellDef>资产名称</th>
            <td class="overWords" mat-cell *matCellDef="let row ">{{ row.assetName }}</td>
          </ng-container>
          <!--对应列名List.ts中定义-->
          <tr mat-header-row *matHeaderRowDef="colsone"></tr>
          <tr mat-row *matRowDef="let data; columns: colsone"></tr>
        </table>
      </div>
      <div class="middle-table">
        <table mat-table [dataSource]="assets | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">
          <ng-container matColumnDef="assetType">
            <th mat-header-cell *matHeaderCellDef>资产类别</th>
            <td mat-cell *matCellDef="let row">{{ row.oaAssetType?.GDZCLBMC }}</td>
          </ng-container>

          <ng-container matColumnDef="createDate">
            <th mat-header-cell *matHeaderCellDef>入库日期</th>
            <td mat-cell *matCellDef="let row">{{ row.createDate | date: 'yyyy-MM-dd' }}</td>
          </ng-container>

          <ng-container matColumnDef="brand">
            <th mat-header-cell *matHeaderCellDef>品牌</th>
            <td class="overWords" mat-cell *matCellDef="let row">{{ row.assetBrand }}</td>
          </ng-container>

          <ng-container matColumnDef="source">
            <th mat-header-cell *matHeaderCellDef>来源</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <span *ngIf="row.source === '0'">自购</span>
              <span *ngIf="row.source === '1'">租赁</span>
              <span *ngIf="row.source === '2'">借用</span>
              <span *ngIf="row.source === '3'">其他</span>
              <span *ngIf="row.source === '4'">自产</span>
              <span *ngIf="row.source === '5'">赠送</span>
            </td>
          </ng-container>

          <ng-container matColumnDef="version">
            <th mat-header-cell *matHeaderCellDef>型号</th>
            <td class="overWords" mat-cell *matCellDef="let row">{{ row.assetVersion }}</td>
          </ng-container>

          <ng-container matColumnDef="sourceComefrom">
            <th mat-header-cell *matHeaderCellDef>渠道</th>
            <td class="overWords" mat-cell *matCellDef="let row">{{ row.sourceComefrom }}</td>
          </ng-container>

          <ng-container matColumnDef="assetPrice">
            <th mat-header-cell *matHeaderCellDef>金额</th>
            <td class="overWords" mat-cell *matCellDef="let row">{{ row.assetPrice }}</td>
          </ng-container>

          <ng-container matColumnDef="buyDate">
            <th mat-header-cell *matHeaderCellDef>购入日期</th>
            <td mat-cell *matCellDef="let row">{{ row.buyDate | date: 'yyyy-MM-dd' }}</td>
          </ng-container>

          <ng-container matColumnDef="snNum">
            <th mat-header-cell *matHeaderCellDef>SN号</th>
            <td class="overWords" mat-cell *matCellDef="let row">{{ row.snNum }}</td>
          </ng-container>

          <ng-container matColumnDef="assetImg">
            <th mat-header-cell *matHeaderCellDef>图片</th>
            <td mat-cell *matCellDef="let row">
              <img style="width: 40px;height: 40px;" *ngIf="row.assetImgUrl1" class="assetImg" [src]="baseurl + row.assetImgUrl1" alt="" (click)="bigImg(row.assetImgUrl1,row.assetImgUrl2,row.assetImgUrl3)" >
            </td>
          </ng-container>

          <ng-container matColumnDef="user">
            <th mat-header-cell *matHeaderCellDef>使用人</th>
            <td mat-cell *matCellDef="let row">{{ row.sysUser.realName }}</td>
          </ng-container>

          <ng-container matColumnDef="department">
            <th mat-header-cell *matHeaderCellDef>使用部门</th>
            <td mat-cell *matCellDef="let row">{{ row.sysDepartment?.departName }}</td>
          </ng-container>

          <ng-container matColumnDef="address">
            <th mat-header-cell *matHeaderCellDef>存放地址</th>
            <td mat-cell *matCellDef="let row">{{ row.address }}</td>
          </ng-container>

          <ng-container matColumnDef="seatNum">
            <th mat-header-cell *matHeaderCellDef>座位号</th>
            <td mat-cell *matCellDef="let row">{{ row.seatNum }}</td>
          </ng-container>

          <ng-container matColumnDef="invoiceNum">
            <th mat-header-cell *matHeaderCellDef>发票号码</th>
            <td mat-cell *matCellDef="let row">{{ row.invoiceNum }}</td>
          </ng-container>

          <ng-container matColumnDef="qrcode">
            <th mat-header-cell *matHeaderCellDef>二维码</th>
            <td mat-cell *matCellDef="let row">
              <img style="width: 40px; height: 40px" *ngIf="row.qrcodeUrl" class="qr-code" [src]="baseurl+row.qrcodeUrl" alt="" (click)="bigCode(row.qrcodeUrl)"></td>
          </ng-container>

          <ng-container matColumnDef="remark">
            <th mat-header-cell *matHeaderCellDef>资产备注</th>
            <td mat-cell *matCellDef="let row">{{ row.remark }}</td>
          </ng-container>

          <ng-container matColumnDef="operate">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let row">
              <span *ngIf="isAdmin" class="operateBtn mr-3" (click)="onOpenEdit(row)">修改</span>
              <span *ngIf="isAdmin" class="operateBtn mr-3" (click)="onDelete(row.id)">删除</span>
            </td>
          </ng-container>
          <!--对应列名List.ts中定义-->
          <tr mat-header-row *matHeaderRowDef="colstwo"></tr>
          <tr mat-row *matRowDef="let data; columns: colstwo"></tr>
        </table>
      </div>
      <div class="right-table">
        <table mat-table [dataSource]="assets | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById"  class="table-bordered">
          <ng-container matColumnDef="operate">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let row">
              <span *ngIf="isAdmin" class="operateBtn mr-3" (click)="onOpenEdit(row)">修改</span>
              <span *ngIf="isAdmin" class="operateBtn mr-3" (click)="onDelete(row.id)">删除</span>
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="colsthree"></tr>
          <tr mat-row *matRowDef="let data; columns: colsthree"></tr>
        </table>
      </div>
    </div>
  </div>

  <app-pagination
    (pageChange)="onPageChanged($event)"
    [maxSize]="9"
    [isShowInput]="true"
    [isShowPage]="true"
    [isMiniMode]="false"
    [total]="total"
  >
  </app-pagination>
  <div class="cover" *ngIf="imgAppear">
    <div class="bigImgbox">
      <span (click)="closeImg()">X</span>
      <div class="imgs">
        <img  [src]="imgUrl1" alt="">
        <img style="margin-left: 3px"  *ngIf="haveimg2" [src]="imgUrl2" alt="">
        <img style="margin-left: 3px" *ngIf="haveimg3" [src]="imgUrl3" alt="">
      </div>
    </div>
  </div>
  <div class="cover" *ngIf="codeAppear">
    <div class="bigImgbox">
      <span (click)="closeCode()">X</span>
      <div class="imgs">
        <img style="margin: 0 auto" [src]="imgUrl1" alt="">
      </div>
    </div>
  </div>
</main>
  <div *ngIf="appearSearch" class="superBox">
    <div class="modalContent">
      <label>分字段搜索</label>
      <div class="assetusemsg">
        <div class="form-group w-50">
          <label class="mr-2 w-25">资产编码</label>
          <input required class="form-control mr-2 w-60" type="text"  placeholder="资产编码" [(ngModel)]="asset.assetCode" name="assetCode">
        </div>
        <div class="form-group w-50">
          <label class="mr-2 w-25">资产名称</label>
          <input required class="form-control mr-2 w-60" type="text"  placeholder="资产名称" [(ngModel)]="asset.assetName" name="assetName">
        </div>
        <div class="form-group w-50">
          <label class="mr-2 w-25">资产型号</label>
          <input class="form-control mr-2  w-60" type="text"  placeholder="型号" [(ngModel)]="asset.assetVersion" name="assetVersion">
        </div>
        <div class="form-group w-50">
          <label class="mr-2 w-25">渠道</label>
          <input class="form-control mr-2 w-60" type="text"  placeholder="渠道" [(ngModel)]="asset.sourceComefrom" name="sourceComefrom">
        </div>
        <div class="form-group w-50">
          <label class="mr-2 w-25">品牌</label>
          <input class="form-control mr-2 w-60" type="text" placeholder="品牌" [(ngModel)]="asset.assetBrand" name="assetBrand">
        </div>
        <div class="form-group w-50">
          <label class="mr-2 w-25">座位号</label>
          <input required class="form-control mr-2 w-60" type="text"  placeholder="使用位置" [(ngModel)]="asset.seatNum" name="seatNum">
        </div>
        <div class="form-group w-50">
          <label class="mr-2 w-25">SN号</label>
          <input required class="form-control mr-2 w-60" type="text"  placeholder="请输入SN号" [(ngModel)]="asset.snNum" name="snNum">
        </div>
      <div class="form-group w-50">
        <label class="mr-2 w-25">发票号码</label>
        <input required class="form-control mr-2 w-60" type="text"  placeholder="发票号码" [(ngModel)]="asset.invoiceNum" name="invoiceNum">
      </div>
      <div class="form-group w-50">
        <label class="mr-2 w-25">备注信息</label>
        <input required class="form-control mr-2 w-60" type="text"  placeholder="备注信息" [(ngModel)]="asset.remark" name="remark">
      </div>
    </div>
    <div class="mt-2 mb-2 boundary"></div>
    <label>条件筛选</label>
    <div class="assetusemsg">
      <div class="form-group w-50 dropdown">
        <label class="mr-2 w-25">资产类别</label>
        <input autocomplete="off" required class="form-control mr-2 w-60" type="text"  placeholder="输入资产类别"  [(ngModel)]="assettypeName" (click)="showtypeTree()" name="assettypeName">
        <tree-root class="treemenu" *ngIf="typetree" [nodes]="nodes" [options]="options" tabindex=100 (blur)="hidetree()"></tree-root>
      </div>
      <div class="form-group  w-50">
        <label class="mr-2 w-25">资产来源</label>
        <select required class="form-control mr-2 w-60" type="text" [(ngModel)]="asset.source" name="assetsource">
          <option [value]="0">自购</option>
          <option [value]="1">租赁</option>
          <option [value]="2">借用</option>
          <option [value]="3">其他</option>
          <option [value]="4">自产</option>
          <option [value]="5">赠送</option>
        </select>
      </div>
      <div class="form-group  w-50">
        <label class="mr-2 w-25">使用部门</label>
        <select required class="form-control mr-2 w-60" type="text" [(ngModel)]="asset.sysDepartment.id" name="departmentid" (ngModelChange)="changeDepartment($event)">
          <option *ngFor="let department of departments" [value]="department.id">
            {{department.departName}}
          </option>
        </select>
      </div>
      <div class="form-group  w-50">
        <label class="mr-2 w-25">使用人</label>
        <select  class="form-control mr-2" type="text"  [(ngModel)]="asset.sysUser.id" name="userid">
          <option *ngFor="let user of users" [value]="user.id">
            {{user.realName}}
          </option>
        </select>
      </div>
      <div class="form-group w-100">
        <label class="mr-3" style="width: 10% !important;;">入库日期</label>
        <input style="width: 38%" class="form-control" type="text"  (click)="beginDate.open()" [max]="endCtrl.value" (ngModelChange)="onSwitchDate($event)" [formControl]="beginCtrl" placeholder="选择开始日期" [matDatepicker]="beginDate" readonly>
        <mat-datepicker #beginDate></mat-datepicker>
        -
        <input style="width: 37%" class="form-control" type="text"  (click)="endDate.open()" [min]="beginCtrl.value" (ngModelChange)="onSwitchDate($event)" [formControl]="endCtrl" placeholder="选择截止日期" [matDatepicker]="endDate" readonly>
        <mat-datepicker #endDate></mat-datepicker>
      </div>
    </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="bigsearch()">搜索</button>
        <button type="button" class="btn btn-secondary" (click)="reset()">重置</button>
        <button type="button" class="btn btn-danger"  (click)="closesearch()">关闭</button>
      </div>
  </div>
</div>
